$(function(){
	$('.form-button-logout').css('display', 'block');
	$('.form-button-goto-main').css('display', 'block');
});

var chart = null;

Ext.require([
	'Ext.chart.*',
    'Ext.data.*'
]);

Ext.onReady(function(){
	Ext.QuickTips.init();
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    
    Ext.define('Weight', {
    	extend: 'Ext.data.Model',
    	fields: [
    		{name: 'id', type: Ext.data.Types.INTEGER},
    		{name: 'date', type: Ext.data.Types.DATE},
    		{name: 'weight', type: Ext.data.Types.FLOAT, min: 0}
    	],
    	proxy: {
	        type: 'ajax',
	        simpleSortMode: true,
	        url: LOAD_URL,
	        reader: {
	            type: 'json',
	            root: 'data',
	            totalProperty: 'total'
	        },
	        writer: {
                type: 'json'
            }
	    }
    });

    // create the data store
    var store = Ext.create('Ext.data.Store', {
        model: 'Weight',
        pageSize: 20,
        autoLoad: true,
        autoSync: true,
        remoteSort: true,
        sorters: [{
            property: 'date',
            direction: 'ASC'
        }]
    });
  
    chart = Ext.create('Ext.chart.Chart', {
	    renderTo: 'chart_container',
	    width: Ext.get('chart_container').getWidth()-1,
        height: Ext.get('chart-wrapper').getHeight()-32,
	    animate: true,
	    store: store,
	    axes: [
	        {
	            type: 'Numeric',
	            position: 'left',
	            fields: ['weight'],
	            label: {
	                renderer: Ext.util.Format.numberRenderer('0.00')
	            },
	            title: messages['label.weight.kg'],
	            grid: true,
	            minimum: 0,
	            maximum: 150
	        },
	        {
	            type: 'Category',
	            position: 'bottom',
	            fields: ['date'],
	            label: {
                    renderer: function(value) {
                        var date = new Date(value);
                        return Ext.Date.format(date, "d-m-Y");
                    }
                },
                grid: true,
	            title: messages['label.date']
	        }
	    ],
	    series: [
	    	{
	    	 	type: 'line',
                axis: 'left',
                xField: 'date',
                yField: 'weight',
                tips: {
                    trackMouse: true,
                    width: 80,
                    height: 40,
                    renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('weight')+ ' кг');
                    }
                },
                style: {
                    fill: '#38B8BF',
                    stroke: '#38B8BF',
                    'stroke-width': 3
                },
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0,
                    fill: '#38B8BF',
                    stroke: '#38B8BF'
              }
	    	}  
	        /*{
	            type: 'column',
	            axis: 'left',
	            highlight: true,
	            tips: {
	              trackMouse: true,
	              width: 140,
	              height: 28,
	              renderer: function(storeItem, item) {
	                this.setTitle(storeItem.get('weight')+' кг');
	              }
	            },
	            label: {
	              display: 'insideEnd',
	              'text-anchor': 'middle',
	                field: 'weight',
	                renderer: Ext.util.Format.numberRenderer('0'),
	                orientation: 'vertical',
	                color: '#333'
	            },
	            xField: 'date',
	            yField: 'weight'
	        }*/
	    ]
	});
    
    window.onresize=recalculateChartSize;
});

//function for recalculating chart size depending on window size
function recalculateChartSize(){
	console.log('width= '+Ext.get('chart_container').getWidth());
	console.log('height= '+Ext.get('chart-wrapper').getHeight());
	if(grid != null){
		grid.setWidth(Ext.get('chart_container').getWidth()-1);
		grid.setHeight(Ext.get('chart-wrapper').getHeight()-32);
	}
}